<template>
   <div class="box">
       <div class="box-header">
           <div class="box-header-one">推荐</div>
           <div class="box-header-two">朋友</div>
           <div class="box-header-three">电台</div>
       </div>
       <router-view/>
   </div>
</template>

<script>
export default {
  name: 'recommend'
}
</script>

<style lang="stylus" scoped>
 .border-bottom
  &:before
   border-color: #cccccc
 .box-header
  width 100%
  height 1rem
  background-color red
  display flex
  flex-direction row
  justify-content center
  line-height 1rem
  .box-header-one
   margin-right 1.8rem
   font-weight bold
   color #ffffff
  .box-header-two
   margin-right 1.8rem
   font-weight bold
   color #ffffff
  .box-header-three
   font-weight bold
   color #ffffff
</style>
